<template>
  <div>
    <!-- 输入框 -->
    <el-input
      v-show="field.type === 'input'"
      v-model="nVal"
      clearable
      :style="field.style"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
      :maxlength="isEmpty(field.maxlength) ? '100' : field.maxlength"
      @change="$emit('changeSlotInput', nVal)"
    />

    <!-- 用户选择 -->
    <span style="display: none;">{{ field.selectOptions }}</span>
    <UserSelect
      v-if="field.type === 'user'"
      v-model="nVal"
      clearable
      :multiple="field.multiple === undefined ? false : field.multiple"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
    />

    <!-- 下拉 -->
    <el-select
      v-if="field.type === 'select'"
      v-model="nVal"
      clearable
      :multiple="field.multiple"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
      @change="$emit('changeSelect', nVal)"
    >
      <el-option
        v-for="(dict, si) in field.selectOptions"
        :key="dict.toString() + si"
        :label="$t(isEmpty(field.selectName) ? dict.dictLabel : dict[field.selectName])"
        :value="isEmpty(field.selectValue) ? dict.dictValue : dict[field.selectValue]"
      />
    </el-select>

    <!-- 字典 -->
    <dict-select
      v-if="field.type === 'dict'"
      v-model="nVal"
      :dictionary="field.dictionary"
      :clearable="true"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
    />

    <!-- 时间 -->
    <DatePicker
      v-if="field.type === 'time'"
      v-model="nVal"
      :clearable="true"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
    />

    <MainBodySelect
      v-if="field.type === 'mainBodySelect'"
      v-model="nVal"
      :clearable="true"
      :parameters="field.selectType"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
    />

    <el-input-number
      v-if="field.type === 'number'"
      v-model="nVal"
      :clearable="true"
      :controls="false"
      :min="isEmpty(field.min) ? -99999999999999 : field.min"
      :max="isEmpty(field.max) ? 99999999999999 : field.max"
      :disabled="isEmpty(field.disabled) ? false : field.disabled"
      :placeholder="isEmpty(field.placeholder) ? '' : field.placeholder"
      @change="$emit('changeSlotNumber', nVal)"
    />
  </div>
</template>

<script>
import MainBodySelect from '@/components/MainBodySelect'
export default {
  components: {
    MainBodySelect
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    },
    selectOptions: {
      type: Array,
      default: () => []
    },
    // eslint-disable-next-line vue/require-default-prop
    value: [String, Array]
  },
  data() {
    return {
      nVal: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.nVal = val
      },
      deep: true,
      immediate: true
    },
    nVal: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    isEmpty(val) {
      return val === undefined || val === null || val.length <= 0 || val === ''
    }
  }
}
</script>

<style scoped>

</style>
